<template>
	<view>
		<view class="uni-list">
			<!-- 头像 -->
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" @tap="selectImage">
				<view class="uni-list-cell-navigate uni-navigate-right uni-media-list uni-pull-right">
					<view class="uni-media-list-logo">
						<image :src="avatar" :data-src="avatar" @tap.stop="previewImage" lazy-load="true"></image>
					</view>
					<view class="uni-media-list-body">
						<view class="uni-media-list-text-top">头像</view>
					</view>
				</view>
			</view>
			<!-- 姓名 -->
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" @tap="cutPopup('realname')">
				<view class="uni-list-cell-navigate uni-navigate-right edit-list-cell">
				    <view class="edit-list-left">
				        <text class="uni-title uni-ellipsis">姓名</text>
				    </view>
				    <view class="edit-list-right">
				        <text class="uni-h5">{{userInfo.realname||''}}</text>
				    </view>
				</view>
			</view>
			<!-- 手机 -->
			<view class="uni-list-cell" hover-class="uni-list-cell-hover">
				<view class="uni-list-cell-navigate edit-list-cell">
				    <view class="edit-list-left">
				        <text class="uni-title uni-ellipsis">手机</text>
				    </view>
				    <view class="edit-list-right">
				        <text class="uni-h5">{{userInfo.mobile||''}}</text>
				    </view>
				</view>
			</view>
			<!-- 昵称 -->
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" @tap="cutPopup('nickname')">
				<view class="uni-list-cell-navigate uni-navigate-right edit-list-cell">
				    <view class="edit-list-left">
				        <text class="uni-title uni-ellipsis">昵称</text>
				    </view>
				    <view class="edit-list-right">
				        <text class="uni-h5">{{userInfo.nickname||''}}</text>
				    </view>
				</view>
			</view>
			<!-- 生日 -->
			<view class="uni-list-cell" hover-class="uni-list-cell-hover">
				<picker mode="date" start="1950-12-1" end="2020-11-1" @change="editBirthday" style="width: 100%;">
					<view class="uni-list-cell-navigate uni-navigate-right edit-list-cell">
						<view class="edit-list-left">
							<text class="uni-title uni-ellipsis">生日</text>
						</view>
					    <view class="edit-list-right">
							<text class="uni-h5">{{userInfo.birthday||''}}</text>
						</view>
					</view>
				</picker>
			</view>
		</view>
		<!-- 性别 -->
		<view class="uni-list list-space">
			<view class="uni-list-cell" hover-class="uni-list-cell-hover">
				<picker @change="editGender" :value="gender" :range="genderArray" style="width: 100%;">
					<view class="uni-list-cell-navigate uni-navigate-right edit-list-cell">
					    <view class="edit-list-left">
					        <text class="uni-title uni-ellipsis">性别</text>
					    </view>
					    <view class="edit-list-right">
					        <text class="uni-h5">{{getGender}}</text>
					    </view>
					</view>
				</picker>
			</view>
		</view>
		<!-- 昵称/姓名编辑弹出层 -->
		<uni-popup :show="showPopupMiddle" @hidePopup="cutPopup()">
			<view>
				<form class="nui-form" @submit="editNickname">
					<view class="uni-form-item">
						<text class="form-title"></text>
					</view>
					<view class="uni-form-item">
						<input class="form-input" type="text" v-model="username" placeholder-style="line-height:1.8;" :placeholder="placeholder" maxlength="20"/>
					</view>
					<view class="uni-form-item button-item uni-flex">
						<button @tap="cutPopup()" class="form-button first-button">取消</button>
						<button formType="submit" class="form-button">确定</button>
					</view>
				</form>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup.vue';
	import { getAvatar,clone } from '@/utils'
	export default {
		data() {
			return {
				avatar:'',
				userInfo:{avatar:'',},
				username:'',
				showPopupMiddle:false,
				gender: 0,
				genderArray: ['女', '男'],
				placeholder: ''
			};
		},
		components: {
			uniPopup,
		},
		created(){
			this.userInfo=clone(uni.getStorageSync('userInfo'));
		},
		onShow(){
			this.avatar = getAvatar();
		},
		computed: {
			/**
			 * 得到用户性别
			 */
			getGender(){
				var that = this;
				var gender='';
				if(that.userInfo){
					switch (that.userInfo.gender){
						case '1':
						case 1:
							gender='男';
							break;
						case '0':
						case 0:
							gender='女';
							break;
					}
				}
				return gender;
			},
		},
		methods:{
			
			/**
			 * 切换显示popup
			 */
			cutPopup(param){
				if(param == 'realname'){
					this.placeholder = '请输入姓名';
				}else if(param == 'nickname'){
					this.placeholder = '请输入昵称';
				}else{
					this.placeholder = '';
				}
				this.username = '';
				this.showPopupMiddle = !this.showPopupMiddle;
			},
			
			/**
			 * 用户信息更新
			 */
			userUpdate(userVo){
				const that = this;
				return new Promise(function (resolve, reject) {
					that.$http.ajax({
						url:that.$http.adornUrl(that.$api.userUpdate),
						method:"POST",
						data:userVo,
						showLoad:true
					}).then(function(data){
						var userInfo = clone(that.userInfo);
						uni.setStorageSync('userInfo', userInfo);
						that.$store.commit('user/updateUserInfo', userInfo);
						that.avatar = getAvatar();
						userInfo=null;
						resolve();
					}).catch(function(err){
						reject();
					})
				})
			},
			
			
			/**
			 * 编辑昵称
			 */
			editNickname(){
				const that = this;
				if(that.username){
					if(that.placeholder == '请输入姓名'){
						that.userInfo.realname = that.username;
					}else if(that.placeholder == '请输入昵称'){
						that.userInfo.nickname = that.username;
					}
					that.userUpdate(that.userInfo).then(function(){
						that.cutPopup();
					});
				}else{
					that.cutPopup();
				}
			},
			
			/**
			 * 编辑生日
			 */
			editBirthday(e){
				var that = this;
				that.userInfo.birthday = e.detail.value;
				that.userUpdate(that.userInfo);
			},
			
			/**
			 * 编辑性别
			 */
			editGender(e){
				var that = this;
				that.userInfo.gender = e.detail.value;
				that.userUpdate(that.userInfo);
			},
			
			/**
			 * 图片预览
			 */
			previewImage(e){
				var current = e.target.dataset.src;
				var urls = [current];
				uni.previewImage({
					current: current,
					urls: urls
				}) 
			},
			
			/**
			 * 上传头像
			 */
			selectImage(){
				uni.chooseImage({
					count: 1, // 默认9
					sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success(res) {
						const src = res.tempFilePaths[0];
						uni.navigateTo({
							url: '/pages/avatar-edit/avatar-edit?src=' + src
						});
					}
				});
			}
		}
	}
</script>

<style lang="less">
	.uni-media-list-logo{
		border-radius:100%;
		overflow: hidden;
	}
	.uni-media-list-text-top{
		height: 84upx;
		line-height: 84upx;
	}
	.nui-form{
		.form-title{
			margin:0 auto;
		}
		.form-input{
			border-bottom:1px solid #000;
			text-align: center;
		}
		.button-item{
			margin-top: 20upx;
			justify-content: space-between;
		}
		.form-button{
			background-color: #4FD2C1;
			color: #fff;
			font-size: 14px;
			margin:0;
			width: 46%;
		}
		.first-button{
			background-color: #ccc;
		}
	}
</style>
